<template>
  <div id="system_user">
    <div class="searchBox">
      <a-form class="searchForm" layout="inline" :form="form">
        <a-form-item>
          <a-input
            v-decorator="[
          'search_name',
          {rules: [{required: true, message: '请输入员工姓名' }]}
        ]"
            placeholder="请输入员工姓名"
          />
        </a-form-item>
        <a-form-item>
          <a-button @click="search" type="primary" html-type="submit">搜索</a-button>
        </a-form-item>
        <a-form-item>
          <a-button @click="reset">重置</a-button>
        </a-form-item>
      </a-form>
      <div class="toolBtn">
        <a-button @click="showModel = true" type="primary">增加新员工</a-button>
      </div>
    </div>
    <div class="table">
      <a-table
        :scroll="{ y: tableHeight }"
        :pagination="false"
        rowKey="id"
        :bordered="true"
        :columns="columns"
        :dataSource="data"
      >
        <div
          slot="time"
          slot-scope="text,record"
        >{{moment(record.create_time).format('YYYY-MM-DD HH:mm:ss')}}</div>
        <div slot="action" slot-scope="text, record">
          <a-button type="primary" class="actionBtn" size="small">账号信息</a-button>
          <a-button type="primary" class="actionBtn" size="small">团队信息</a-button>
          <a-button type="primary" class="actionBtn" size="small">教育经历</a-button>
          <a-button @click="setRole(record)" type="primary" class="actionBtn" size="small">工作经历</a-button>
          <a-button @click="edit(record)" class="actionBtn" size="small">修改</a-button>
          <a-popconfirm
            placement="left"
            title="谨慎操作，将永久删除该员工?"
            @confirm="del(record.id)"
            okText="确定"
            cancelText="取消"
          >
            <a-button type="danger" class="actionBtn" size="small">删除</a-button>
          </a-popconfirm>
        </div>
      </a-table>
      <a-pagination
        class="pager"
        v-if="dataCount > 0"
        @change="pageChange"
        v-model="pageIndex"
        :total="dataCount"
        :pageSize="pageSize"
      />
    </div>
    <editor ref="editor"></editor>
    <setRole ref="setRole"></setRole>
  </div>
</template>
<script>
//todo 批量导入员工
import editor from "./employee/editor";
import setRole from "./employee/setUser";
const columns = [
  {
    title: "员工姓名",
    dataIndex: "employee_name"
  },
  {
    title: "性别",
    width: 68,
    dataIndex: "gender"
  },
  {
    title: "昵称",
    width: 198,
    dataIndex: "nick_name"
  },
  {
    title: "工号",
    width: 198,
    dataIndex: "employee_code"
  },
  {
    title: "电话",
    width: 198,
    dataIndex: "phone"
  },
  {
    title: "创建时间",
    width: 198,
    dataIndex: "create_time",
    scopedSlots: { customRender: "time" }
  },
  {
    title: "操作",
    width: 500,
    key: "action",
    scopedSlots: { customRender: "action" }
  }
];
export default {
  components: {
    editor,
    setRole
  },
  data() {
    return {
      data: [],
      columns,
      pageSize: 38,
      pageIndex: 1,
      dataCount: 0,
      form: this.$form.createForm(this),
      moment: require("moment"),
      showModel: false,
      showRoleModel: false,
      tableHeight: 260
    };
  },
  created() {
    this.getData();
  },
  mounted() {
    this.tableHeight = document.querySelector(".table").clientHeight - 100;
  },
  methods: {
    async setRole(record) {
      let roles = await this.$post("/employee/employee/getUserRoles", {
        user_id: record.id,
        page_index: 0
      });
      if (roles.error) return;
      this.$refs.setRole.record = record;
      this.$refs.setRole.checkedRoles = roles.data.filter(v => v.checked);
      this.$refs.setRole.elseRoles = roles.data.filter(v => !v.checked);
      this.showRoleModel = true;
    },
    async switchStat(record) {
      let stat = record.stat == "disable" ? "enable" : "disable";
      let result = await this.$post("/system/user/setStat", {
        id: record.id,
        stat
      });
      if (result.error) return;
      this.$notification.success({
        message: "设置成功"
      });
      record.stat = stat;
    },
    edit(item) {
      this.showModel = true;
      this.$refs.editor.getDetail(item.id);
    },
    async del(id) {
      let result = await this.$post("/employee/employee/del", { id });
      if (result.error) return;
      this.$notification.success({
        message: "删除成功"
      });
      if (this.dataCount > this.pageSize) {
        let search_name = this.form.getFieldValue("search_name");
        this.getData(this.pageIndex - 1, search_name);
        return;
      }
      let index = this.data.findIndex(v => v.id == id);
      this.data.splice(index, 1);
    },
    pageChange(pageIndex) {
      let search_name = this.form.getFieldValue("search_name");
      this.getData(pageIndex - 1, search_name);
    },
    async getData(page_index = 0, employee_name = "") {
      let result = await this.$post("/employee/employee/getList", {
        page_index,
        employee_name
      });
      this.pageIndex = page_index + 1;
      this.data = result.data;
      this.dataCount = result.data_count;
    },
    async search() {
      this.form.validateFields(async (err, values) => {
        if (err) return;
        this.getData(0, values.search_name);
      });
    },
    async reset() {
      this.form.resetFields();
      this.getData();
    }
  }
};
</script>
<style lang="scss" scoped>
#system_user {
  display: flex;
  flex-direction: column;
  height: 100%;
  .table {
    flex: 1;
  }
  .pager {
    margin-top: 12px;
    float: right;
  }
  .searchBox {
    margin-bottom: 12px;
    display: flex;
  }
  .searchForm {
    flex: 1;
  }
  .toolBtn {
    padding-top: 4px;
  }
}
</style>

<style>
#system_user .actionBtn {
  margin-left: 12px !important;
}
#system_user .ant-form-inline .ant-form-item-with-help {
  margin-bottom: 0px !important;
}
</style>


